<template>
  <table
    id="flight-change-list"
    class="table table-sm table-striped table-hover"
  >
    <thead>
      <tr>
        <th class="d-none d-md-table-cell">改签单号</th>
        <th class="d-none d-md-table-cell">票号</th>
        <th class="d-none d-md-table-cell"></th>
        <th>乘客/公司</th>
        <th class="d-none d-md-table-cell">原编码</th>
        <th class="bg-info text-center text-white">出发</th>
        <th class="bg-info text-center text-white">到达</th>
        <th class="bg-info text-center text-white">日期</th>
        <th class="bg-info text-center text-white">航班号</th>
        <th class="bg-info text-center text-white d-none d-md-table-cell">
          舱位
        </th>
        <th class="bg-info text-center text-white d-none d-md-table-cell">
          起飞
        </th>
        <th class="d-none d-md-table-cell">操作员</th>
        <th class="text-end d-none d-md-table-cell">改签费</th>
        <th class="text-end d-none d-md-table-cell">服务费</th>
        <th class="d-none d-md-table-cell">新票号</th>
        <th class="d-none d-md-table-cell">提交时间</th>
        <th class="d-none d-md-table-cell">状态</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(info, index) in dataList"
        :key="index"
        @click.stop="showDetail(info.id)"
      >
        <td class="d-none d-md-table-cell">{{ info.changeOrderNo }}</td>
        <td class="d-none d-md-table-cell">
          <strong>{{ info.balanceCode }}-{{ info.ticketNo }}</strong>
          <br />
          <i
            ><small>
              <span class="text-danger" v-if="info.intlTicket === 1">国际</span>
              <span v-else>国内</span>
            </small></i
          >
        </td>
        <td class="d-none d-md-table-cell">
          <span class="text-primary" v-if="info.changeCount > 0">{{
            info.changeCount + 1
          }}</span>
        </td>
        <td>
          <strong>{{ info.psgName }}</strong>
          <br />
          <span class="d-inline-block text-truncate small" style="max-width: 100px;">{{ showCustomerName(info, 1) }}</span>
        </td>
        <td class="d-none d-md-table-cell">{{ info.oldPnrNo }}</td>
        <td>
          <template v-for="(flt, index) in info.flights">
            <span :class="{ small: flt.fltType === 0 }" :key="index">
              {{ flt.dport }}
              <span class="d-none d-md-inline">{{ flt.dportName }}</span>
              <br />
            </span>
          </template>
        </td>
        <td>
          <template v-for="(flt, index) in info.flights">
            <span :class="{ small: flt.fltType === 0 }" :key="index">
              {{ flt.aport }}
              <span class="d-none d-md-inline">{{ flt.aportName }}</span>
              <br />
            </span>
          </template>
        </td>
        <td>
          <template v-for="(flt, index) in info.flights">
            <span :class="{ small: flt.fltType === 0 }" :key="index" v-if="flt.ddate !== null">
              {{ flt.ddate.substring(5) }}
              <br />
            </span>
          </template>
        </td>
        <td>
          <template v-for="(flt, index) in info.flights">
            <span :class="{ small: flt.fltType === 0 }" :key="index">
              {{ flt.flightNo }}
              <br />
            </span>
          </template>
        </td>
        <td class="d-none d-md-table-cell">
          <template v-for="(flt, index) in info.flights">
            <span :class="{ small: flt.fltType === 0 }" :key="index">
              {{ flt.subclass }}
              <br />
            </span>
          </template>
        </td>
        <td class="text-center d-none d-md-table-cell">
          <template v-for="(flt, index) in info.flights">
            <span :class="{ small: flt.fltType === 0 }" :key="index">
              {{ flt.dtime }}
              <br />
            </span>
          </template>
        </td>
        <td class="d-none d-md-table-cell">{{ info.operator }}</td>
        <td class="text-end d-none d-md-table-cell">
          {{ info.airChangeCharge }}
        </td>
        <td class="text-end d-none d-md-table-cell">
          {{ info.serviceCharge }}
        </td>
        <td class="d-none d-md-table-cell">
          {{ info.newTicketNo }} <br />{{ info.newPnrNo }}
        </td>
        <td class="d-none d-md-table-cell">
          {{ info.createTime.substring(5, 16) }}
        </td>
        <td class="d-none d-md-table-cell">
          {{ getStatus(info.status) }}
          <span class="small text-primary" v-if="info.payStatus === 2"
            >已销</span
          >
        </td>
        <td>
          <i class="mdi mdi-arrow-right fa-2"></i>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { showChangeOrderStatus } from "@/api/flight-change.js";
import { showCustomerName } from "@/common/common.js";
export default {
  props: {
    dataList: {
      type: Array,
    },
  },
  methods: {
    showDetail: function (id) {
      this.$router.push(`/h5/flt/change/order/` + id);
    },
    getStatus: function (status) {
      return showChangeOrderStatus(status);
    },
    showCustomerName: function (info, mode = 0) {
      return showCustomerName(info, mode);
    }
  },
};
</script>